<template>
  <div class="demo">
    <div class="demo-title">搜索用户</div>
    <div class="demo-content">
      <Select
        v-model:value="state.value"
        mode="multiple"
        label-in-value
        placeholder="Select users"
        style="width: 100%"
        :filter-option="false"
        :not-found-content="state.fetching ? undefined : null"
        :options="state.data"
        @search="fetchUser"
      >
        <template v-if="state.fetching" #notFoundContent>
          <Spin size="small" />
        </template>
      </Select>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch } from 'vue';
  import { debounce } from 'lodash-es';
  import Spin from '@sscd/spin';
  import Select from '@sscd/select';
  const state = reactive({
    data: [],
    value: [],
    fetching: false,
  });
  let lastFetchId = 0;
  const fetchUser = debounce((value) => {
    console.log('fetching user', value);
    lastFetchId += 1;
    const fetchId = lastFetchId;
    state.data = [];
    state.fetching = true;
    fetch('https://randomuser.me/api/?results=5')
      .then((response) => response.json())
      .then((body) => {
        if (fetchId !== lastFetchId) {
          // for fetch callback order
          return;
        }
        const data = body.results.map((user) => ({
          label: `${user.name.first} ${user.name.last}`,
          value: user.login.username,
        }));
        state.data = data;
        state.fetching = false;
      });
  }, 300);
  watch(state.value, () => {
    state.data = [];
    state.fetching = false;
  });
</script>
